<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="/Facelets/Templates/template.xhtml">

    <ui:define name="content">	
        <script type="text/javascript">  
        function handleLoginRequest(xhr, status, args) {  
         if(args.validationFailed) {  
             jQuery('#dialog').parent().effect("shake", { times:2 }, 100);  
         } else {  
             dlgCadastro.hide();  
         }  
                }
     	
        function fadein(input, container) {
                container.fadeIn("slow");
        }
        
        function fadeout(input, container) {
                container.fadeOut("slow");        	
        }
        </script>  

        <p:growl id="msgs"/>
        <div class="ui-widget" style="padding-left: 10px; padding-top: 5px; padding-bottom: 14px;">
            <a href="#{request.contextPath}/index.faces" style="color: black;">Home</a> > Alocação de Equipamentos em Raques
        </div>
        <p:fieldset legend="Alocação de Equipamentos em Raques">
            <table style="width: 100%; height: 100%;">
                <tr>
                    <td style="width: 16%; text-align: center;">
                <h:form id="formTool">
                    <p:panel>
                        <p:commandButton title="Alocar Novo Equipamento"
                                         value="Nova Alocação de Equipamentos" image="ui-icon ui-icon-document"
                                         action="#{RacksBean.botaoNovoAction}"
                                         oncomplete="dlgCadastro.show()" update="formCadastro" style="width: 150px; height: 50px;"/>
                    </p:panel>
                </h:form>
                </td>
                <td style="width: 25%;"></td>
                <td><h:graphicImage value="/imagens/messagebox.png" /></td>
                <td style="text-align: left;">
                    <p>
                        <span style="color: cornflowerblue;" class="ui-widget">Nesta seção pode ser feito a alocação de novos <strong>equipamentos em raques</strong>, edição ou exclusão.</span><br/>
                        <span style="color: cornflowerblue;" class="ui-widget">Dica 1: Para cadastrar novos clique no botão a sua esquerda.</span><br/>
                        <span style="color: cornflowerblue;" class="ui-widget">Dica 2: Para editar ou excluir visualize e os faça na tabela abaixo.</span>

                    </p>
                </td>
                <td style="width: 10%;"></td>
                </tr>
            </table>
        </p:fieldset>

        <h:form id="formTabela">
            <p:panel>
                <p:dataTable id="List" rows="10" paginator="true"
                             paginatorPosition="top" value = "#{RacksBean.lista}"
                             var="bean" >
                    <f:facet name="header">Raques</f:facet>


                    <p:column headerText="Numero do Raque" style="width:100px">
                        <h:outputText value="#{bean.numero}"/>
                    </p:column>

                    <p:column headerText="Equipamentos" style="width:100%">
                        <h:outputText value="#{bean.equipamentoList}"/>
                    </p:column>

                    <p:column headerText="Editar" style="width:10px">
                        <p:commandButton image="ui-icon-pencil" update="formCadastro"
                                         action="#{RacksBean.botaoAlterarAction}"
                                         oncomplete="dlgCadastro.show();">
                            <f:setPropertyActionListener value="#{bean}"
                                                         target="#{RacksBean.bean}"/>
                        </p:commandButton>
                    </p:column>

                    <p:column headerText="Excluir" style="width:32px">
                        <p:commandButton update="formTabela"
                                         onclick="confirmation.show();" image="ui-icon-trash"
                                         >
                            <f:setPropertyActionListener value="#{bean}"
                                                         target="#{RacksBean.bean}"/>
                        </p:commandButton>
                    </p:column>

                    <f:facet name="footer">  
                        #{fn:length(RacksBean.lista)} Alocação de Equipamentos no total.  
                    </f:facet>
                </p:dataTable>
            </p:panel>
        </h:form>

        <h:form>
            <p:confirmDialog message="Deseja realmente excluir esta Alocação?"
                             showEffect="slide" hideEffect="explode" appendToBody="true"
                             header="Confirmação" severity="alert" modal="true"
                             widgetVar="confirmation">

                <p:commandButton value="Sim" update="formTabela"
                                 oncomplete="confirmation.hide()"
                                 action="#{RacksBean.botaoApagarAction}"/>
                <p:commandButton value="Não" onclick="confirmation.hide()"
                                 type="button" />
            </p:confirmDialog>
        </h:form>

        <p:dialog id = "dialog" widgetVar="dlgCadastro" resizable="false" modal="true" appendToBody="true" closeOnEscape="true"
                  position="center" width="710">
            <h:form id="formCadastro">
                <p:fieldset legend="Alocação de Equipamentos em Raques">
                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputText value="Raque em que deseja alocar*:"/>
                        <h:selectOneMenu required="true" requiredMessage="Campo [Tipo] de preenchimento obrigatório"
                                         value="#{EquipamentosBean.equipamento.tipo}" 
                                         converter="TipoConverter">
                            <f:selectItem itemLabel="-- Selecione um Raque --"/>
                            <f:selectItems value="#{EquipamentosBean.listaTipo}"/>
                        </h:selectOneMenu>
                    </h:panelGrid>

                    <br/><h:outputText value=". Equipamentos que deseja alocar no raque*:"/><br/>
                    <p:pickList value="#{RacksBean.dualListEquipamentos}"
                                var="equipamento" converter="EquipamentoConverter"
                                itemLabel="#{equipamento}"
                                itemValue="#{equipamento}">
                    </p:pickList>

                    <h:panelGrid columns="3" cellpadding="5">
                        <p:commandButton value="Salvar" image = "ui-icon-save"
                                         update="formTabela msgs" 
                                         action="#{RacksBean.botaoSalvarAction}" oncomplete="handleLoginRequest(xhr, status, args)"/>
                        <p:commandButton type="reset" value="Resetar Modificações" />
                        <p:commandButton value="Cancelar" immediate="true" onclick="dlgCadastro.hide()"/>
                    </h:panelGrid>
                </p:fieldset>
            </h:form>
        </p:dialog>
    </ui:define>
</ui:composition>